<template>
	<view class="TopNav">
		<view class="top-nav-wrap">
			<view class="back">
				<view v-if="leftArrow">
					<uni-icons type="back" size="60rpx" :color="leftColor" @click="back()"></uni-icons>
				</view>
			</view>
			<view class="more">
				<view class="more-icon" v-if="rightBtn">
					<uni-icons type="more-filled" size="60rpx" @click="handleMore"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		leftArrow: {
			type: Boolean,
			default: true
		},
		rightBtn: {
			type: Boolean,
			default: false
		},
		leftColor: {
			type: String,
			 default: '#000'
		}
	},
	data() {
		return {};
	},
	onLoad() {},
	methods: {
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		handleMore() {
			this.$emit('click');
		}
	}
};
</script>

<style lang="scss">
.TopNav {
	// background-color: #fff;
	.top-nav-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		padding: 16rpx;
	}
	.back,.more,.more-icon {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80rpx;
		height: 80rpx;
	}
	.more-icon {
		width: 64rpx;
		height: 64rpx;
	}
}
</style>
